<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        /**
         * replace()+正则：
         * 最简单的模板引擎实现机理：利用replace()+正则，其中replace()的第二个参数可以是一个函数，
         *  这个函数提供捕获的东西的参数，就是$1,结合data对象，进行替换、
         */
        // 封装成函数render
         function render(template, data) {
            return template.replace(/\{\{(\w+)\}\}/g, function (findStr, $1) {
                return data[$1];
            })
        }


        let template = `<h1>我是一个{{a}},就{{b}}看这</h1>`;
        let data = {
            a: "土狗",
            b: "喜欢"
        };
        //正则：/\{\{(\w+)\}\}/g :(\W+)表示捕获其中的内容
        // console.log(template.replace(/\{\{(\w+)\}\}/g, function (findStr, $1) {
        //     console.log(findStr, $1)
        //     return data[$1];
        // }))
    
     
        let domStr=render(template,data);
        console.log(domStr)


    </script>

</body>

</html>